<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/base_bai/base.css">
    <title>商品详情</title>

    <style>
    img{    display: block;}
      html, body{font-size: 100%;background: #F5F5F5}
    .van-nav-bar .van-icon{color:black;}
    .van-tabs__wrap--scrollable .van-tab{    flex: 0 0 20%;}
    .van-tab{color:black}


    [goods_title]{font-size: 1rem;}
    [share]>span{display: flex;    align-items: center;float: right;background: #F5F5F5;   padding: .2rem .5rem; border-radius: 2rem;font-size: .7rem;}

    [price_sty]{margin-top: 2rem;font-size: .8rem;display: flex;}
    [price_sty]>span{flex:1;color:#979899}
    [price_sty]>span:nth-child(1){color:#FF540A}
    [price_sty]>span b{font-size: 1rem}
    [price_sty]>span>span{color:#979899;margin-left: .5rem}



    .goods_info{ display:flex;padding: 1rem .5rem;margin: 1rem 0;  box-shadow: 0px 0px 10px #e6e6e6;  border-radius: .5rem;}
    .goods_info *{font-size: .9rem}
    .goods_info>[cont]{position: relative;    width: 100%;}
    .goods_info>[cont]>div{height:2.5rem;   display: -webkit-box;-webkit-box-orient: vertical;  -webkit-line-clamp: 2;  overflow: hidden;}
    .goods_info>[cont]>div:nth-child(2){position:absolute;    bottom: 0;}
    .goods_info>[shop_img]{margin-right:.5rem}
    .goods_info [cont_font]>span{color:#979899;  padding-right: 1rem;}

    [more]{padding: 1rem 0 2rem}
    [more] img{width:100%; }
    .van-tabs__line{background: #FF9900}
    .van-ellipsis{font-size: 1rem}

    [fot_sty]{display: flex;  align-items: center;background: white;    box-shadow: 0px -10px 10px #f3f3f3;    justify-content: center;}
    [fot_sty]>div{margin: 0 .5rem}

      [buy]>button{    background: #FF9900;  color: white;border-radius: 2rem;  height: 2.3rem;  line-height: 2.3rem;padding: 0 2rem;}
      [shopping_cart]>button{    background: #333333;  color: white;border-radius: 2rem;  height: 2.3rem;  line-height: 2.3rem;padding: 0 2rem;}
    </style>
</head>

<body>
    <div id="app" v-cloak>

        <div>
            <van-nav-bar class="m-header" title="商品详情页" left-arrow @click-left="  closeWin()" />
        </div>


        <div>

            <van-swipe indicator-color="white">
                <van-swipe-item v-for="(image, index) in images" :key="index"><img style="width:100%" src="../../image/goods_goods_list_detail_1.png" /></van-swipe-item>
            </van-swipe>
            <div style="padding:1rem;background-color:white;">
                <div goods_title>北欧小户型布艺沙发客厅双人三人简约风格日式小沙 发组合ins质感</div>
                <div share><span><van-icon name="../../image/share.png" ></van-icon>分享</span></div>
                <div price_sty><span>¥ <b>679.9</b> <span>市场价¥ 879</span></span> <span style="text-align:right">已售出：4916</span></div>
                <div class="goods_info">
                    <div shop_img><img src="../../image/goods_goods_list_detail_3.png" style="width:4.25rem" /></div>
                    <div cont>
                        <div>商户名称</div>
                        <div style="color:#979899">
                            商户介绍商户介绍商户介绍商户结束商户结商户介绍商户介绍商户介绍商户结束商户结束束
                        </div>
                    </div>
                </div>
                <div more>
                    <van-tabs v-model="active" line-width="10px">
                        <van-tab title="商品详情">
                            <div style="margin-top:1rem"> <img src="../../image/goods_goods_list_detail_2.png"></div>
                        </van-tab>
                        <van-tab title="购买权益">购买权益</van-tab>

                    </van-tabs>
                </div>

            </div>
            <div  fot_sty>
                    <div style="    text-align: center;color:#979899"><div role="button" tabindex="0" class="van-goods-action-icon"><div class="van-icon van-icon-wap-home-o van-goods-action-icon__icon"><!----></div>客服</div></div>
                    <div shopping_cart><van-button type="default">加入购物车</van-button></div>
                    <div buy><van-button type="default" @click="buy()">立即购买</van-button></div>
            </div>
            <div>
              <van-sku
                  v-model="show"
                  :sku="sku"
                  :goods="goods"
                  :quota="quota"
                  @buy-clicked="onBuyClicked"
                  @add-cart="onAddCartClicked"
                />
            </div>
        </div>





    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/base_bai/vue.js"></script>
<script src="../../script/base_bai/vant.js"></script>
<script src="../../script/base_bai/base.js"></script>
<script src="../../script/base_bai/temp.js"></script>
<script type="text/javascript">
    apiready = function() {
        headerH = $api.fixStatusBar($api.byId('app'));
        Vue.prototype.$ac = api;
        initVue()
    };
    if (BrowserType() == 'pc') {
        initVue()
    }

    function initVue() {
        new Vue({
            el: '#app',
            // data: temp.center.order_list,
            data: {
                images: [
                    '../../image/goods_goods_list_detail_1.png',
                    '../../image/goods_goods_list_detail_1.png'
                ],
                  active: 0,
                 show: false,
                  quota:0,
                 sku: {

                                                 // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                              // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                              tree: [
                               {
                                 k: '颜色', // skuKeyName：规格类目名称
                                 v: [
                                   {
                                     id: '30349', // skuValueId：规格值 id
                                     name: '红色', // skuValueName：规格值名称
                                     imgUrl: '../../image/goods_goods_list_detail_3.png', // 规格类目图片，只有第一个规格类目可以定义图片
                                     previewImgUrl: '../../image/goods_goods_list_detail_3.png', // 用于预览显示的规格类目图片
                                   },
                                   {
                                     id: '1215',
                                     name: '蓝色',
                                     imgUrl: '../../image/goods_goods_list_detail_3.png',
                                     previewImgUrl: '../../image/goods_goods_list_detail_3.png',
                                   }
                                 ],
                                 k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                               }
                              ],
                              // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                              list: [
                               {
                                 id: 2259, // skuId，下单时后端需要
                                 price: 100, // 价格（单位分）
                                 s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
                                 s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
                                 s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                                 stock_num: 110 // 当前 sku 组合对应的库存
                               }
                              ],
                              price: '1.00', // 默认价格（单位元）
                              stock_num: 227, // 商品总库存
                              collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                              none_sku: false, // 是否无规格商品
                              messages: [
                               {
                                 // 商品留言
                                 datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                                 multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                                 name: '留言', // 留言名称
                                 type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                                 required: '1', // 是否必填 '1' 表示必填
                                 placeholder: '' // 可选值，占位文本
                               }
                              ],
                              hide_stock: false // 是否隐藏剩余库存
                   },
                   goods: {
                     // 商品标题
                      title: '测试商品',
                      // 默认商品 sku 缩略图
                      picture: '../../image/goods_goods_list_detail_3.png'
                   },


            },
            methods: {
              buy(){
                this.show=true;
              },
                onBuyClicked(){
                     openWin("goods_confirm_order", "goods_confirm_order")
                },
                onAddCartClicked(){

                }
            }

        })
    }
</script>

</html>
